<template>
	<view class="content">
		<view class="v-navbar" :style="'position:'+headerPosition+';top:'+headerTop+';height:'+((showSearchState==0)?'86px':'auto')">
			<view style="width: 750rpx;height: 48px;"><uni-search-bar :placeholder="showSearchValue" @confirm="search" @cancel="searchCancel" @inputClick="searchClick" :focus="((showSearchState==0)?false:true)" ref="uniSearchBar"></uni-search-bar></view>
		
			<view class="navbar" style="margin-top: 48px;" v-if="showSearchState==0">
				<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
					综合
				</view>
				<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
					销量
				</view>
				<view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
					<text>价格</text>
					<view class="p-box">
						<text :class="{active: priceOrder === 1 && filterIndex === 2}" class="yticon icon-shang"></text>
						<text :class="{active: priceOrder === 2 && filterIndex === 2}" class="yticon icon-shang xia"></text>
					</view>
				</view>
				<view class="nav-item" :class="{current: filterIndex === 3}" @click="tabClick(3)">
					新品
				</view>
			</view>
		</view>
		<view class="v-search-content" :style="'height:'+(windowHeight-52)+'px'" v-if="showSearchState==1">
			<view class="v-search-nav" v-if="hotKeyArray.length>0">
				<view class="v-search-title"><text class="t-search-title">热门搜索</text></view>
				<view class="example-body">
					<view class="tag-view" v-for="(item,index) in hotKeyArray" :key="index" @click="toSearch(item)">
						<uni-tag :text="item.value" />
					</view>
				</view>
			</view>
			<view class="v-search-nav" v-if="hisKeyArray.length>0">
				<view class="v-search-title"><text class="t-search-title">历史搜索</text><view class="v-nav-qk" @click="clearSearchKey"><text class="icon t-nav-icon">&#xe64c;</text><text class="t-nav-qk">清空</text></view></view>
				<view class="example-body">
					<view class="tag-view" v-for="(item,index) in showHisKeyArray" :key="index" v-if="index<10" @click="toSearch(item)">
						<uni-tag :text="item.value" />
					</view>
				</view>
			</view>
		</view>
		<view class="cart-list" v-if="showSearchState==0">
			<block v-for="(item, index) in goodsList" :key="index">
				<view
					class="cart-item" 
				
				>
					<view class="image-wrapper">
						<image :src="item.proData.imageList[0]" 
							mode="aspectFill" 
							lazy-load 
							@click="toEditProData(item._id)"
						></image>
					</view>
					<view class="item-right" @click="toEditProData(item._id)">
						<text class="pro-title">{{item.proData.productName}}</text>
						<text class="attr" style="display: none;">{{item.attr_val}}</text>
						<view class="v-price-btn">
							<view style="color: rgb(255, 68, 68);margin-top: 13px;width:100%"><text class="price-tag">¥</text>{{item.proData.skuRetailPrice}}<text class="sold-num" style="display: none;">0件已售</text></view>
							<view class="v-buy-btn"><text class="t-buy-btn icon">&#xe664;</text></view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="loadingType" v-if="showSearchState==0"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/zx-ui/zx-load-more/zx-load-more.vue';
	import uniSearchBar from '@/components/uni-ui/uni-search-bar/uni-search-bar.vue';
	import uniTag from "@/components/uni-ui/uni-tag/uni-tag.vue"
	import myCloud from '@/common/util/cloud.js';
	import myConst from '@/common/util/const.js';
	import { formatTime } from '@/common/util/util.js';
	import { getData } from '@/common/api/goods.js'
	export default {
		components: {
			uniLoadMore,
			uniSearchBar,
			uniTag
		},
		data() {
			return {
				cateMaskState: 0, //分类面板展开状态
				headerPosition:"fixed",
				headerTop:"0px",
				loadingType: 'more', //加载更多状态
				filterIndex: 0, 
				cateId: 12, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: [],
				selectedArray: [],
				searchProName:'',
				loadType:1,  //云函数 判断你要干啥
				field:'',
				order:'',
				state:'上架',
				windowHeight: 700,
				showSearchState: 0,
				hotKeyArray:[],
				hisKeyArray:[],
				showHisKeyArray:[],
				showSearchValue:'请输入商品名称'
			};
		},
		
		created() {
			
			const { windowWidth, windowHeight } = uni.getSystemInfoSync();
			this.windowHeight = windowHeight;
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			// this.cateId = options.tid;
			// this.loadCateList(options.fid,options.sid);
			// this.loadData();
			let tmp = {id:1,name:'商品状态',child:[{id:11,name:'全部'},{id:12,name:'上架'},{id:13,name:'下架'}]}
			this.cateList.push(tmp);
			
			
			let search_key = uni.getStorageSync('search_key');
			if(search_key!=undefined&&search_key!=''){
				let dataT = JSON.parse(search_key);
				if(dataT.length>0){
					this.hisKeyArray = dataT;
					for(var i=dataT.length-1;i>=0;i--){
						this.showHisKeyArray.push(dataT[i])
					}
				}
			}
			this.goodsList = [];
			this.loadProData(0,this.loadType,this.searchProName,this.field,this.order,this.state);
			
			
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			if(this.loadingType=='more'){
				this.loadingType = 'loading';
				this.loadProData(this.goodsList.length,this.loadType,this.searchProName,this.field,this.order,this.state);	
			}
		},
		methods: {
			proCheck(e){
				if(this.goodsList[e.currentTarget.dataset.index].checked==true){
					this.goodsList[e.currentTarget.dataset.index].checked = false;
					for(let i=0;i<this.selectedArray.length;i++){
						if(this.selectedArray[i]._id==this.goodsList[e.currentTarget.dataset.index]._id){
							this.selectedArray.splice(i,1);
							break;
						}
					}
				}else{
					this.goodsList[e.currentTarget.dataset.index].checked = true;
					this.selectedArray.push(this.goodsList[e.currentTarget.dataset.index]);
				}
			},
			//
			async loadProData(offset,type,productName,field,order,state){
				const req = {
					type:type,
					offset:offset,
					productName:productName,
					field:field,
					order:order,
					state:state,
					updatetime:new Date().getTime()
				}
				const data = await getData(req)
				if(data.length<5){  //说明已经加载全部
					this.loadingType = 'noMore';
				}else{
					this.loadingType = 'more';
				}
				for(let item in data){
					data[item].checked = false;
				}
				this.goodsList.push.apply(this.goodsList, data);
			},
			
			toEditProData(id){
				uni.navigateTo({
				    url: '/pages/goods/goods-detail?id='+id
				});
			},
			
			//筛选点击
			tabClick(index){
				if(this.filterIndex === index && index !== 2){
					return;
				}
				this.filterIndex = index;
				if(index === 2){
					this.priceOrder = this.priceOrder === 1 ? 2: 1;
				}else{
					this.priceOrder = 0;
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
	
				if(index==0){
					this.field = 'updatetime'
					this.order = 'desc'
				}else if(index==1){
					this.field = 'sales'
					this.order = 'desc'
				}else if(index==2){
					this.field = 'price'
					if(this.priceOrder==1){
						this.order = 'asc'
					}else if(this.priceOrder==2){
						this.order = 'desc'
					}
				}
				this.goodsList = [];
				this.loadType = 4;
				this.loadProData(0, this.loadType,this.searchProName,this.field,this.order,this.state);
				uni.showLoading({
					title: '正在加载'
				})
			},
			//显示分类面板
			toggleCateMask(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.cateMaskState = 2;
				setTimeout(()=>{
					this.cateMaskState = state;
				}, timer)
			},
			//分类点击
			changeCate(item){
				this.cateId = item.id;
				this.toggleCateMask();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.goodsList = [];
				this.state = item.name
				this.loadProData(0, this.loadType,this.searchProName,this.field,this.order,this.state);
				uni.showLoading({
					title: '正在加载'
				})
			},
			stopPrevent(){},
			search(res) {
				this.showSearchState = 0;
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
				this.goodsList = [];
				this.searchProName = res.value;
				this.loadType = 2;
				this.loadingType = 'more';
				this.loadProData(0,this.loadType,res.value,this.field,this.order,this.state);
				let tmp = {value:res.value};
				let hasSValue = 0;
				for(var i=0;i<this.hisKeyArray.length;i++){
					if(this.hisKeyArray[i].value==res.value){
						hasSValue=1;
						break;
					}
				}
				if(hasSValue==0&&res.value!=''){
					this.hisKeyArray.push(tmp)
					uni.setStorageSync('search_key', JSON.stringify(this.hisKeyArray));
				}
				
			},
			searchCancel(){
				this.showSearchState = 0;
				this.showSearchValue = '请输入商品名称';
			},
			searchClick(){
				this.showSearchState = 1;
				this.showSearchValue = '请输入商品名称';
			},
			clearSearchKey(){
				uni.removeStorageSync('search_key');
				this.hisKeyArray=[];
			},
			toSearch(v){
				this.search(v);
				this.$refs.uniSearchBar.setSearchValue(v.value);
			}
		},
	}
</script>

<style lang="scss">
	@import './../../../common/style/mall.scss';
	page, .content{
		color: #333;
		background-color: #f8f8f8;
	}
	.icon{
		font-size: 24px;
		font-family: iconfont;
		color: rgb(255, 68, 68);
	}
	.content{
		padding-top: 96upx;
	}
	.v-navbar{
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 86px;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
		z-index: 10;
	}
	.navbar{
		position: fixed;
		left: 0;
		// top: var(--window-top);
		display: flex;
		width: 100%;
		height: 40px;
		background: #fff;
		// border: 1px solid #f1f1f1;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 14px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: rgb(255, 68, 68);
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
				}
			}
		}
		.p-box{
			display: flex;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;
				&.active{
					color: $base-color;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	/* 购物车列表项 */
	.cart-item{
		display:flex;
		position:relative;
		padding-top: 15px;
		padding-left: 15px;
		padding-right: 15px;
		.image-wrapper{
			width: 145px;
			height: 145px;
			flex-shrink: 0;
			position:relative;
			image{
				border-radius:0upx;
				opacity: 1;
			}
		}
		.checkbox{
			position:absolute;
			left:-16upx;
			top: -16upx;
			z-index: 8;
			font-size: 44upx;
			line-height: 1;
			padding: 4upx;
			color: $font-color-disabled;
			background:#fff;
			border-radius: 50px;
		}
		.item-right{
			display:flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position:relative;
			padding-left: 10px;
			padding-right: 10px;
			background-color: #fff;
			.title,.price{
				font-size:$font-base + 2upx;
				color: $font-color-dark;
				height: 40upx;
				line-height: 40upx;
			}
			.attr{
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				height: 50upx;
				line-height: 50upx;
			}
			.price{
				height: 50upx;
				line-height:50upx;
			}
		}
	}
	/* 底部栏 */
	.cart-list{
		margin-top: 35px;
	}
	
	.pro-title{
		margin: 10px 0 0;
	    max-height: 40px;
		font-size: 12px;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.v-price-btn{
		position: absolute;
		bottom:0;
		height: 44px;
		width: 100%;
		display: flex;
		left:0;
		right:0;
		margin-left: 10px;
		padding-right: 20px;
	}
	.sale-price{
	    height: 16px;
	    color: #f44;
	    font-size: 16px;
	    line-height: 16px;
	    word-break: break-all;
	    display: -webkit-box;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	}
	.sold-num{
		margin-left: 4px;
		color: #9b9b9b;
		font-size: 12px;
	}
	.price-tag{
		margin-right: 2px;
		font-size: 12px;
	}
	.v-buy-btn{
		margin-top: 12px;
		margin-right: 20px;
	}
	.t-buy-btn{
	    height: 24px;
	    font-size: 24px;
	    line-height: 24px;
		margin-top: 13px;
	}
	.v-search-content{
		width: 750rpx;
		background-color: #F9F9F9;
	}
	.example-body {
		font-size: 13px;
		background-color: #ffffff;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 20rpx;
	}
	.tag-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		margin: 10rpx 15rpx;
		justify-content: center;
	}
	.v-search-nav{
		margin: 18px;
		border-radius: 5px;
		background-color: #ffffff;
	}
	.t-search-title{
		margin-top: 10px;
		margin-left: 15px;
		font-size: 13px;
		font-weight: bold;
		position: absolute;
	}
	.v-search-title{
		margin-top: 20px;
		height: 25px;
	}
	.t-nav-icon{
		font-size: 13px;
		color: #999;
	}
	.v-nav-qk{
		float: right;
		margin-top: 5px;
		margin-right: 3px;
	}
	.t-nav-qk{
		font-size: 13px;
		color: #999;
		margin-right: 10px;
	}
</style>